<template>
    <div>
<div class="index-banner containerful">
    <div class="index-header">
        <div class="index-logo">
          <a href="">
            <img src="@/assets/img/logo.png" alt="">
          </a>
        </div>
        <div class="index-nav">
         <indexNav></indexNav>
        </div>
    </div>
      <!--当status是O时展示banner-->
      <div class="swiper-container" v-if="bannerData&&bannerData.status==='O'">
          <div class="swiper-wrapper" style="height:100%;">
            <a :href="item.url" class="swiper-slide" v-for="(item,index) in bannerData.comptItems" :key="index" v-if="item.status==='O'">
              <div  class="img bg-img"  :style="{
                        backgroundImage:'url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522087972833&di=38071e0ac1e3792766257636a94e3780&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F3801213fb80e7beca9004ec5252eb9389b506b38.jpg)'
                     }">
              </div>
            </a>                                                                                    
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
      </div>
      <publicFooter></publicFooter>
    </div>
    </div>
</template>

<script>
    import publicFooter from '@/components/publicFooter'
    import Swiper from 'swiper';
    import indexNav from '@/components/nav.vue'
    import indexApi from '@/api/index/nav'
    import '@/assets/css/swiper.min.css';
 
    
    export default {
        name:'index',
        data(){
            return {
                bannerData:null
            }
        },
        created(){
            this.getIndexBanner();
        },
        methods:{
            getIndexBanner(){ //获取首页banner
                indexApi.getIndexBanner().then(response=>{
                    console.log(response)
                    this.bannerData = response;
                })
            },
        },
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                 direction: 'horizontal',
                loop: true,
                autoplay: {
                    delay:3000,
                    disableOnInteraction: false,
                    waitForTransition: false,
                },
                speed:2000,
                effect : 'fade',
                fadeEffect: {
                crossFade: true,
                },
                // 如果需要分页器
                pagination: {
                el: '.swiper-pagination',
                clickable: true
                }, 
            });
        },
        components:{publicFooter,indexNav}
    }
</script>

<style scoped>
  .index-banner{
        position: relative;
    }
    .index-header{
        position: relative;
        position: absolute;
        top:0;
        left:0;
        z-index: 99;
        height: 100px;
        width: 100%;
    }
    .index-logo{
        position: absolute;
        left:30px;
        top:40px;
        height: 55px;
        width:auto;
        
    }
    .index-logo img{
        height: 55px;
        width:auto;
    }
    .index-nav{
        width:1000px;
        float: right;
        position: relative;
    }
   
    .index-banner .swiper-container {
        width: 100%;
        height: 100vh;
    }  
    .index-banner .swiper-slide{
    display: block;
    width: 100%;
    height: 100%;
    }
    .index-banner .img{
        height:100%;
         background-repeat:no-repeat;
        background-size: cover; 
        background-position:center center;
    }
    .index-banner .bg-img{
        -webkit-animation: animScale 10s linear infinite;
        animation: animScale 10s linear infinite;
        -ms-animation: animScale 10s linear infinite;
        -moz-animation: animScale 10s linear infinite;
        -o-animation: animScale 10s linear infinite;
    }
    
</style>